@use "../mixins/bem" as *;
@use "../mixins/function" as *;
@use "../mixins/config" as *;
@use "../var/theme-size";
@use "../var/theme-style";

$button-size: 2.3rem;
$progress-thickness: calc($button-size / 10);

@include b(rightBottomButton) {
  position: fixed;
  right: 2rem;
  bottom: 2.5rem;
  z-index: 99;
  gap: 1rem;

  @include e(button) {
    position: relative;
    width: $button-size;
    height: $button-size;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: getCssVar("shadow-1");
    text-align: center;
    cursor: pointer;

    background: getCssVar("bg-color-1");

    &:hover {
      background: getCssVar("theme-color");
      box-shadow: getCssVar("shadow-2");
      .#{$namespace}-icon {
        color: #ffffff;
      }
    }

    /* 进度条样式 */
    &.back-top {
      &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background:
          radial-gradient(farthest-side, getCssVar("theme-color") 98%, #0000) top / $progress-thickness
            $progress-thickness no-repeat,
          conic-gradient(getCssVar("theme-color") calc(getCssVar("progress") * 1%), #0000 0);
        -webkit-mask: radial-gradient(
          farthest-side,
          #0000 calc(99% - $progress-thickness),
          #000 calc(100% - $progress-thickness)
        );
        mask: radial-gradient(
          farthest-side,
          #0000 calc(99% - $progress-thickness),
          #000 calc(100% - $progress-thickness)
        );
      }

      /* 进度条尾部添加圆圈 */
      &::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        inset: calc(50% - $progress-thickness / 2);
        transform: rotate(calc(getCssVar("progress") * 3.6deg - 90deg)) translate(calc($button-size / 2 - 50%));
        background-color: getCssVar("theme-color");
      }
    }

    /* 主题尺寸样式 */
    @include e(button__size) {
      position: absolute;
      bottom: 0.7rem;
      right: 1.7rem;
    }

    /* 主题风格样式 */
    @include e(button__mode) {
      position: absolute;
      bottom: 0.7rem;
      right: 1.7rem;

      @include e(button__mode__title) {
        padding: 0 10px;
        font-size: 12px;
        color: var(--el-color-info);
        cursor: default;
      }
    }

    .dropdown {
      padding: 6px 0 8px 0;
      background: getCssVar("bg-color-1");
      box-shadow: getCssVar("shadow-1");
      width: 110px;
      border-radius: 6px;
      line-height: 1.6rem;
      text-align: left;

      .dropdown-item {
        font-size: 14px;
        padding: 0 10px 0 15px;
        &:hover {
          background-color: getCssVar("item-bg-color-hover");
          color: getCssVar("theme-color");
        }
        &.active {
          background-color: getCssVar("theme-color");
          color: getCssVar("bg-color-1");
        }
      }
    }
  }

  @media (max-width: 719px) {
    right: 1rem;
    bottom: 1.5rem;
  }

  @media (max-width: 960px) {
    .size-change {
      display: none;
    }
  }
}
